<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>分步表单</title>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <blockquote class="layui-elem-quote" style="padding: 5px;">
            1.layui第三方扩展组件：<font color="red" size="2">分步表单(step)</font>；
            <a href="https://gitee.com/giteetcj/layui_steps" target="_blank" class="layui-btn layui-btn-sm layui-btn-danger">step</a><br>
            2.本项目暂时未用到该组件；
        </blockquote>
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md5 layui-col-lg5">
                <div class="ok-body">

                    <pre>
            // Step1. 引入依赖
            let step = layui.step;
            <br/>

            // Step2. 使用
            step.render({
                elem: '#stepForm',
                filter: 'stepForm',
                width: '100%', //设置容器宽度
                stepWidth: '750px',
                height: '500px',
                stepItems: [{
                    title: '填写入款信息'
                }, {
                    title: '确认入款信息'
                }, {
                    title: '完成'
                }]
            });
                    </pre>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md7 layui-col-lg7">
                <div class="layui-fluid">
                    <div class="layui-card">
                        <div class="layui-card-body" style="padding-top: 40px;">
                            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                                <div carousel-item>
                                    <div>
                                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">游戏ID:</label>
                                                <div class="layui-input-block">
                                                    <input type="text" placeholder="请填写入款人游戏ID" class="layui-input" lay-verify="number" required />

                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">入款类型:</label>
                                                <div class="layui-input-block">
                                                    <select lay-verify="required">
                                                        <option value="1" selected>保险箱</option>
                                                        <option value="2">现金</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">备注说明:</label>
                                                <div class="layui-input-block">
                                                    <textarea placeholder="入款备注" value="" class="layui-textarea"></textarea>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <div class="layui-input-block">
                                                    <button class="layui-btn" lay-submit lay-filter="formStep">
                                                        &emsp;下一步&emsp;
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div>
                                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">游戏ID:</label>
                                                <div class="layui-input-block">
                                                    <div class="layui-form-mid layui-word-aux">639537</div>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">账户余额:</label>
                                                <div class="layui-input-block">
                                                    <div class="layui-form-mid layui-word-aux">3000 元（保险箱：1000，现金：2000）</div>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">入款方式:</label>
                                                <div class="layui-input-block">
                                                    <div class="layui-form-mid layui-word-aux">人工入款</div>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <div class="layui-input-block">
                                                    <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                                    <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                        &emsp;确认入款&emsp;
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div>
                                        <div style="text-align: center;margin-top: 90px;">
                                            <i class="layui-icon layui-circle"
                                               style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                            <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                                入款成功
                                            </div>
                                            <div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
                                        </div>
                                        <div style="text-align: center;margin-top: 50px;">
                                            <button class="layui-btn next">再入一笔</button>
                                            <button class="layui-btn layui-btn-primary">查看账单</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
<!--  引入layui框架js文件-->
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="UTF-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(["code","form", "step"], function () {
        let code = layui.code;
        let form = layui.form;
        let step = layui.step;
        let $ = layui.jquery;

        code({
            elem: "pre",
            title: "代码示例",
            encoded: true,
            skin:'notepad', //设置显示风格
            about: false
        });

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '填写入款信息'
            }, {
                title: '确认入款信息'
            }, {
                title: '完成'
            }]
        });

        form.on('submit(formStep)', function (data) {
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            step.next('#stepForm');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });
    });
</script>
</body>
</html>
